<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        .redBox{
            color:red;
        }
        #greenBox{
            background-color:green;
        }
        .bigBox{
            font-size: 50px;
        }
    </style>
</head>
<body>
<!--使用v-bind可以绑定属性，可以简写为':'-->
    <div id="test">
        <div v-bind:class="className1":class="className2":id="idName">hello,world</div>
    </div>
</body>
<script type="text/javascript">
    var vm=new Vue({
        el:'#test',
        data:{
            className1:'redBox',className2:'bigBox',idName:'greenBox'
        }
    });
</script>
</html>